<template>
  <div class="page">
    <el-row class="page">
      <el-col :span="4" class="page">
        <left-index @classifyId="classifyId" />
      </el-col>
      <el-col :span="6" class="page">
        <middle-list :classify-ids="classifyIds" :date="date" article-id="articleId" @article="article" @articleSignal="articleSignal" />
      </el-col>
      <el-col :span="14" class="page positionAboslute">
        <right-text v-if="richText" :rich-text="richText" :rich-info="richInfo" @refresh="refresh" />
        <div class="white">
          <span class="white-word">TO:李杰, my love</span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import leftIndex from './components/left.vue'
import middleList from './components/middle.vue'
import rightText from './components/right.vue'
export default {
  components: {
    leftIndex: leftIndex,
    middleList: middleList,
    rightText: rightText
  },
  data() {
    return {
      richText: null, // 富文本传值
      classifyIds: null, // 分类ID
      richInfo: null, // 单个文章信息
      articleId: null,
      date: null
    }
  },
  methods: {
    // middle传出的分类id值
    article(num) {
      this.richText = num
    },
    // 分类ID传出的值
    classifyId(id) {
      this.classifyIds = id
    },
    // middle传出的单个文章
    articleSignal(info) {
      this.richInfo = info
    },
    // right保存文章刷新列表
    refresh(date) {
      this.date = date
    }
  }
}
</script>

<style scoped lang="stylus">
  .page
    height: 100%
    .positionAboslute
      position: relative
      .white
        background: #eee
        opacity: .3
        border-left: 1px solid #d9d9d9
        height: 100%
        width: 100%
        display: flex
        align-items: center
        justify-content: center
        position: absolute
        top: 0
        z-index: -1
        .white-word
          font-size: 50px
          font-family: '楷体'
          user-select: none
</style>
